<template>
<div class="Upload">
    <el-upload action="#" :file-list="fileList" list-type="picture-card" :auto-upload="false" :on-change="change" ref="RemovePicture">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
            <span class="el-upload-list__item-actions">
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                </span>
            </span>
        </div>
    </el-upload>
</div>
</template>

<script>
export default {
    name: "Upload",
    props: {
        imglist: {
            type: Array,
            default: function () {
                return []
            }
        }
    },
    data() {
        return {
            fileList: [],
            dialogImageUrl: "",
            disabled: false,
            imgArray: [],
            text: ''
        };
    },
    mounted() {
        if (this.imglist.length > 0) {
            this.imglist.forEach((item) => {
                this.fileList.push({
                    id: item.id,
                    url: item.imgUrl
                })
                this.imgArray.push(item.id)
            })
        }
    },
    methods: {
        change(file) {
            if (!this.beforeAvatarUpload(file.raw)) {
                return false
            }
            let img = this.$common.uploadFile(file.raw);
            img
                .then((res) => {
                    if (res.result === 'success') {
                        this.imgArray.push(res.data.id)
                        this.$emit("click", this.imgArray);
                        this.$message({
                            message: '上传成功',
                            type: "success",
                        });
                    } else {
                        this.$message({
                            message: res.errorMsg,
                            type: "warning",
                        });
                    }
                })
                .catch((err) => {
                    // this.$message({
                    //     message: err,
                    //     type: "error",
                    // });
                });
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            const isImg = file.type.includes('image');

            if(!isImg){
                this.$message.error("只能上传图片格式!");
            }

            if (!isLt2M) {
                this.$message.error("只能上传图片格式并且图片大小不能超过 2MB!");
            }
            return isImg && isLt2M;
        },
        handleRemove(file) {
            let imgList = this.$refs['RemovePicture'].uploadFiles;
            let index = imgList.indexOf(file)
            this.imgArray.splice(index, 1)
            this.$emit("click", this.imgArray);
            this.$refs['RemovePicture'].uploadFiles.map(item => {
                if (item.uid === file.uid) {
                    this.$refs['RemovePicture'].uploadFiles.splice(index, 1)
                }
            })
        },
    },
};
</script>
